{% extends "base.html" %}
{% load i18n %}

{% block htmlhead %}
{{block.super}}
<style type="text/css" media="screen">
#filelist {
	background-color: white;
        padding: 10px;
        width: 700px;
        /*line-height: 200%;*/
	margin-left: auto;
	margin-right: auto;
        border: 5px solid #ccc;
}
</style>

<link rel="stylesheet" type="text/css" media="screen" href="/site_media/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/site_media/css/ui.jqgrid.css" />

<script src="/site_media/js/jquery.js" type="text/javascript"></script>
<script src="/site_media/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/site_media/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function(){ 

jQuery("#data1").jqGrid({
                        datatype: "local", 
                        colNames:['Title', 'Tags', 'Labels'], 
                        colModel:[ 
                                        {name:'title', index:'title'}, 
                                        {name:'tags', index:'tags'}, 
                                        {name:'labels', index:'labels'}, 
                                ], 
			height: 'auto',
			autowidth: true,
                        caption: "List of all documents"
                        });

var mydata = [{% for row in rows %}
{ title:"<a href=\"/hide/doc/{{ row.id }}\">{{row.value.title}}</a>", tags:"{{row.value.tags}}", labels:"{{row.value.labels}}" },
{% endfor %}];

for(var i=0;i<=mydata.length;i++) {
        jQuery("#data1").jqGrid('addRowData',i+1,mydata[i]);
}

});
                                        
</script>

{% endblock %}

{% block title %}
HIDE v1.5
{% endblock %}

{% block content %}

<div id="filelist">
<table id="data1"></table>
</div>

{% endblock %}

